<template>
  <view class="forgive">
    <view :style="{'paddingTop':statusBarHeight+'px'}">
      <view class="header">
        <view @tap='handleBack' class="back">
          <image src='/static/icon/back.png' mode='widthFix'></image>
        </view>
        <view>{{title}}</view>
      </view>
      <view v-if="sept===0" class="sept">
        <view class="input">
          <view class="input-title">手机号</view>
          <input
            type="number"
            @focus="handleFocusInput('phone')"
            @input="handleChangeInput"
            placeholder="输入手机号"
          />
        </view>
        <view class="input">
          <view class="input-title">验证码</view>
          <input
            type="number"
            @input="handleChangeInput"
            placeholder="输入验证码"
            @focus="handleFocusInput('vericode')"
          />
          <view class="input-getCore" @tap="handleGetCode">{{codeTitle}}</view>
        </view>
        <view class="input">
          <view class="input-title">新密码</view>
          <input
            @input="handleChangeInput"
            :type="newPassword"
            placeholder="输入6~16位数字字母"
            @focus="handleFocusInput('password')"
          />
        </view>
        <view class="input">
          <view class="input-title">重复密码</view>
          <input
            type="password"
            @input="handleChangeInput"
            placeholder="输入6~16位数字字母"
            @focus="handleFocusInput('yzPw')"
          />
        </view>
      </view>
      <view v-if="sept===1" class="suc">
        <image src='/static/suc.png'  mode='widthFix'></image>
        <view>密码修改成功</view>
        <view class="suc-btn" @tap='handleBack'>马上登录</view>
      </view>
    </view>
    <view class="btn" v-if="sept===0">
      <button @tap="handleSubmit">下一步</button>
    </view>
  </view>
</template>

<script>
import { getCode, rePasswordLogin } from './api'
export default {
  data () {
    return {
      newPassword: 'password',
      codeDisabled: false,
      type: 'phone',
      title: '忘记密码',
      sept: 0,
      statusBarHeight: null,
      codeTitle: "获取验证码",

      params: {
        phone: '',
        vericode: '',
        password: '',
        yzPw: ''
      },
    }
  },
  onLoad () {
    const _self = this
    uni.getSystemInfo({
      success: function (res) {
        // 系统状态栏高度
        _self.statusBarHeight = res.statusBarHeight
      }
    });
  },
  methods: {
    handleFocusInput (type) {
      this.type = type
      console.log(this.type)
    },
    handleChangeInput (e) {
      this.params[this.type] = e.detail.value
    },
    async handleSubmit () {

      // debugger
      if (!this.params.password || this.params.password !== this.params.yzPw) {
        return this.$utils.common.toast.fail("密码不一致");
      }
      try {
        const param = {
          code: this.params.vericode,
          phone: this.params.phone,
          password: this.params.password
        }
        const data = await rePasswordLogin(param);
        console.log(data)
        if (data.code === 200) {
          this.sept = 1
        }
      } catch (err) {

        if (err.code !== 200) {
          return this.$utils.common.toast.fail(err);
        }
      }
    },
    async handleGetCode () {
      if (this.codeDisabled) return
      const myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!this.params.phone || !myreg.test(this.params.phone)) {
        return this.$utils.common.toast.fail("手机号码有误");
      }
      this.codeDisabled = true
      try {
        const data = await getCode(this.params.phone);
        console.log(data)
        if (data.code > 200) {
          this.codeDisabled = false
          return this.$utils.common.toast.fail(data.message);
        }
        let s = 60;
        let timer = setInterval(() => {
          if (s <= 0) {
            clearInterval(timer)
            this.codeTitle = "重新获取"
            this.codeDisabled = false
            return
          }
          s -= 1;
          this.codeTitle = `${s}s后重新获取`
        }, 1000)

      } catch (err) {
        this.codeDisabled = false
        if (err.code !== 200) {
          return this.$utils.common.toast.fail(err);
        }
      }

    },
    handleBack () {
      this.$utils.common.navigateBack()
    }
  },
}
</script>
<style lang="scss" scoped>
.suc-btn{
  display: flex;
  justify-content: center;
  font-size:34rpx;
color:rgba(255,255,255,1);
font-weight:400;
 margin-top: 44rpx;
    align-items: center;
  width:240rpx;
height:88rpx;
background:rgba(12,212,211,1);
opacity:1;
border-radius:88rpx;
}
.suc{
    display: flex;
    flex-direction: column;
    align-items: center;
   image{
    margin-top: 136rpx;
    width:326rpx;
  }
}
.forgive {
  height: 100vh;
  background-color: #ffffff;
  .header {
    .back {
      image {
        width: 42rpx;
      }
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      left: 50rpx;
    }
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 22rpx 50rpx;
    margin-bottom: 40rpx;
    font-size: 36rpx;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 48rpx;
    color: rgba(46, 62, 83, 1);
  }
  .btn {
    padding-top: 146rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    button {
      width: 624rpx;
      height: 88rpx;
      background: rgba(12, 212, 211, 1);
      opacity: 1;
      font-size: 34rpx;
      font-family: PingFang SC;
      font-weight: 400;
      color: rgba(255, 255, 255, 1);
      border-radius: 88rpx;
    }
  }
  .sept {
    padding: 0 64rpx;
  }
  .input {
    display: flex;
    padding-top: 70rpx;
    padding-bottom: 50rpx;
    border-bottom: 2rpx solid rgba(227, 227, 227, 1);
    &-title {
      padding-right: 60rpx;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      color: rgba(46, 62, 83, 1);
      white-space: nowrap;
    }
    input,
    input::placeholder,
    &-getCore {
      white-space: nowrap;
      font-size: 30rpx;
      font-family: PingFang SC;
      font-weight: 400;
      line-height: 40rpx;
      // color: rgba(196, 203, 213, 1);
    }
  }
}
</style>